<template>
  <div class="rihuoyuedu" ref="rihuoyuedu"></div>
</template>

<script>
export default {
  name: 'RiHuoYueDu',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  watch: {
    data(val) {
      this.reloadChart();
    },
  },
  created() {
    // prettier-ignore
    let dataAxis = ['历史最高', '1', '2', '3', '4', '5', '6', '7', '8', '9','10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27','28', '29', '30', '31'];
    let data = new Array(dataAxis.length).fill(0);
    this.option = {
      title: {
        left: 66,
        top: 35,
        subtext: '次',
      },
      grid: {
        top: 75,
        left: 90,
        right: 55,
        bottom: 40,
      },
      xAxis: {
        data: dataAxis,
        axisLabel: {
          inside: false,
          color: '#fff',
          interval: 0,
          alignMinLabel: 'right',
          fontSize: 6,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        z: 10,
      },
      yAxis: {
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#86909C',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#86909C',
          },
        },
      },
      series: [
        {
          type: 'bar',
          showBackground: false,
          itemStyle: {
            color: ({ seriesIndex, dataIndex, data, value }) => {
              if (dataIndex === 0) {
                return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#FB7224' },
                  { offset: 1, color: 'rgba(22, 93, 255, 0)' },
                ]);
              }
              return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#16D5FF' },
                { offset: 1, color: 'rgba(22, 93, 255, 0)' },
              ]);
            },
            borderRadius: [100, 100, 0, 0],
          },
          // background: linear-gradient(180deg, #16D5FF 0%, rgba(22, 93, 255, 0) 100%);
          emphasis: {
            focus: 'self',
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: 12,
            },
          },
          data: data,
          label: {
            show: false,
            fontSize: 8,
          },
        },
      ],
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const box = this.$refs.rihuoyuedu;
      const chart = this.$echarts.init(box);
      this.chart = chart;

      this.reloadChart();
    },
    reloadChart() {
      const option = this.option;
      if (this.data.length > 0) {
        const xAxisData = this.data.map(item => {
          if (item.date === 0) {
            return '历史最高';
          }
          return item.date;
        });
        const seriesData = this.data.map(item => item.recordCount);
        option.xAxis.data = xAxisData;
        option.series[0].data = seriesData;
      }
      const chart = this.chart;
      chart && chart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.rihuoyuedu {
  width: 100%;
  height: 100%;
}
</style>
